<template>
  <section class="content company-info">
    <div class="company-message">
      <div class="company-message-title">
        公司信息
      </div>

    <Panel :expandable="true" color="#409EFF" :expand="true">
      <template slot="title">
        基本信息
      </template>
      <template slot="body">
        <el-form label-width="178px">
          <el-form-item label="公司ID:">
            {{enterpriseNum}}
          </el-form-item>
          <el-form-item label="公司管理员:">
            {{enterpriseSuper ? enterpriseSuper : '无'}}
          </el-form-item>
          <el-form-item label="公司名称:" :required="true">
            <el-input v-model="companyName"></el-input>
          </el-form-item>
          <el-form-item label="组织机构代码:" :required="true">
            <el-input v-model="organizationalCode"></el-input>
          </el-form-item>
          <el-form-item label="公司地址:" class="company-address">
            <!-- <el-select @change="getCitys(editorInfo.province)" v-model="editorInfo.province" placeholder="-请选择省-">
              <option v-for="provinceItem in province" :value="provinceItem.id" :key="provinceItem.id" :label="provinceItem.name"></option>
            </el-select>
            <el-select v-model="editorInfo.city" placeholder="-请选择市-">
              <option v-for="cityItem in city" :value="cityItem.id" :key="cityItem.id" :label="cityItem.name"></option>
            </el-select>
            <el-select v-model="editorInfo.district" placeholder="-请选择省-">
              <option v-for="areaItem in area" :value="areaItem.id" :key="areaItem.id" :label="areaItem.name"></option>
            </el-select> -->
            <el-select style="width: 174px" @change="getCitys(editorInfo.province)" v-model="editorInfo.province" placeholder="-请选择省-">
              <el-option key="" value="" label="-请选择省-"></el-option>
              <el-option
                v-for="item in province"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
            <el-select style="width: 174px; margin-left: 14px" v-model="editorInfo.city" placeholder="-请选择市-" @change="getAreas(editorInfo.city)">
              <el-option key="" value="" label="-请选择市-"></el-option>
              <el-option
                v-for="item in city"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
            <el-select style="width: 174px; margin-left: 14px" v-model="editorInfo.district" placeholder="-请选择区-">
              <el-option key="" value="" label="-请选择区-"></el-option>
              <el-option
                v-for="item in area"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-input v-model="companyAdress"></el-input>
          </el-form-item>
          <el-form-item label="联系人:" :required="true">
            <el-input v-model="linkman"></el-input>
          </el-form-item>
          <el-form-item label="联系人邮箱:" :required="true">
            <el-input v-model="contactEmail"></el-input>
          </el-form-item>
          <el-form-item label="联系人手机:" :required="true">
            <el-input v-model="contactPhone"></el-input>
          </el-form-item>
        </el-form>
      </template>
    </Panel>

    <Panel :expandable="true" color="#409EFF" :expand="true">
      <!--<span style="font-size: 14px;margin-left: 20px;color: #FF9328">提示：以下信息需至上海公共服务平台申请办</span>-->
      <template slot="title">订单申报信息</template>
      <template slot="body">
        <el-form label-width="178px">
          <el-form-item label="企业名称:" :required="true">
            <el-input v-model="ebcName" placeholder="企业名称"></el-input>
          </el-form-item>
          <el-form-item label="企业备案编码:" :required="true">
            <el-input v-model="onlineCode" placeholder="企业的海关注册登记编号或统一社会信用代码（10位）"></el-input>
          </el-form-item>
          <el-form-item label="企业跨境编码:" :required="true">
            <el-input v-model="senderCode" placeholder="公服平台分配的唯一电商代码（7 位 ）" :maxlength="7"></el-input>
          </el-form-item>
          <el-form-item label="用户编号:" :required="true">
            <el-input v-model="appUid" placeholder="电子口岸持卡人IC卡或IKEY编号"></el-input>
          </el-form-item>
          <el-form-item label="用户名称:" :required="true">
            <el-input v-model="appUname" placeholder="电子口岸持卡人姓名"></el-input>
          </el-form-item>
        </el-form>
      </template>
    </Panel>

    <!-- <Panel :expandable="true" color="#409EFF" :expand="true">
      <template slot="title">物流信息<span style="font-size: 14px;margin-left: 20px;color: #FF9328">提示：以下信息需与9610物流企业办理</span></template>
      <template slot="body">
        <el-form label-width="178px">
          <el-form-item label="电商企业编码:">
            <el-input v-model="onlineCode" placeholder="公司在东航物流的编码"></el-input>
          </el-form-item>
          <el-form-item label="物流企业编码:">
            <el-input v-model="logisticsEnterpriseCode" placeholder="物流公司编码"></el-input>
          </el-form-item>
        </el-form>
      </template>
    </Panel> -->

    <Panel :expandable="true" color="#409EFF" :expand="true">
      <template slot="title">收汇申报信息<span style="font-size: 14px;margin-left: 20px;color: #FF9328">提示：以下信息需提交资料至上海工商银行办理</span></template>
      <template slot="body">
        <el-form label-width="178px">
          <el-form-item label="工行企业编号:" :required="true">
            <el-input v-model="vendorId"></el-input>
          </el-form-item>
          <!--<el-form-item label="交易编码:">-->
            <!--{{ transactionCode }}-->
            <!--&lt;!&ndash; <el-input v-model="transactionCode"></el-input> &ndash;&gt;-->
          <!--</el-form-item>-->
          <el-form-item label="交易附言:">
            <el-input v-model="transactionPostscript"></el-input>
          </el-form-item>
        </el-form>
      </template>
    </Panel>
    <div style="text-align: center">
      <el-button type="primary" @click="savevalitor">保存</el-button>
      <!--<el-button @click="back">返回</el-button>-->
    </div>
    </div>

  </section>
</template>

<script>
  import instance from '@/api/index.js'
  import Panel from '@/components/common/panel'
  function trim(str) {
    return (str || '').trim();
  }
    export default {
        name: "companyProfile",
        components: {
          Panel
        },
      data(){
          return{
            editorInfo: {
              province:'',//省
              city:'',//市
              district:'',//区
            },//编辑
            province: [],//省
            city: [],//市
            area: [],//区
            enterpriseNum:'',//企业编号
            enterpriseSuper:'',//企业超级管理员
            companyName:'',//公司名称
            companyAdress:'',//公司地址
            linkman:'',//联系人
            contactEmail:'',//联系人邮箱
            contactPhone:'',//联系人手机号
            enterpriseInfo:[],//获取企业信息
            vendorId: "",// 供应商编号

            //组织机构代码
            organizationalCode: "",
            //用户编号
            userNumber: "",
            //用户名称
            userName: "",
            appUid: "",
            appUname: "",
            ebcName: "",
            //电商企业编码
            onlineCode: "",
            senderCode: "",
            //物流企业代码
            logisticsEnterpriseCode: "",
            //工行企业编号
            vendorId: "",
            //交易编码
            transactionCode: "",
            //交易附言
            transactionPostscript: ""
        }
      },
      methods:{
        //获取企业信息
        getEnterpriseInfo:function(){
          let vm = this;

          instance({
            method:'post',
            url:'/user/getEnterpriseInfo/',
          }).then(function (data) {
            if(data.data.success){

              vm.enterpriseInfo = data.data.data;
              vm.enterpriseNum =vm.enterpriseInfo.no;//企业编号
              vm.enterpriseSuper= vm.enterpriseInfo.superAdminName;//企业超级管理员
              vm.companyName = vm.enterpriseInfo.name;//公司名称
              vm.companyAdress = vm.enterpriseInfo.address;//公司地址
              vm.linkman = vm.enterpriseInfo.contact;//联系人
              vm.contactEmail = vm.enterpriseInfo.contactEmai;//联系人邮箱
              vm.contactPhone = vm.enterpriseInfo.contactPhone;//联系人手机号
              vm.vendorId = vm.enterpriseInfo.vendorId;
              vm.editorInfo.province = vm.enterpriseInfo.province;//省
              vm.editorInfo.city = vm.enterpriseInfo.city;//市
              vm.editorInfo.district = vm.enterpriseInfo.countyArea;//区
              vm.vendorId = vm.enterpriseInfo.vendorId;// 供应商编号

              vm.organizationalCode= vm.enterpriseInfo.organizationalCode;
              vm.userNumber= vm.enterpriseInfo.userNumber;
              vm.appUid = vm.enterpriseInfo.appUid;
              vm.userName= vm.enterpriseInfo.userName;
              vm.appUname= vm.enterpriseInfo.appUname;
              vm.onlineCode= vm.enterpriseInfo.onlineCode;
              vm.senderCode= vm.enterpriseInfo.senderCode;
              vm.ebcName = vm.enterpriseInfo.ebcName;
              vm.logisticsEnterpriseCode= vm.enterpriseInfo.logisticsEnterpriseCode;
              vm.vendorId= vm.enterpriseInfo.vendorId;
              vm.transactionCode= vm.enterpriseInfo.transactionCode;
              vm.transactionPostscript= vm.enterpriseInfo.transactionPostscript;

              vm.getProvCityAreaList();
              vm.getCitys(vm.enterpriseInfo.province);
              vm.getAreas(vm.enterpriseInfo.city);
              if(vm.enterpriseInfo.province == null){
                vm.editorInfo.province = '';
              }
              if(vm.enterpriseInfo.city == null){
                vm.editorInfo.city = '';
              }
              if(vm.enterpriseInfo.countyArea == null){
                vm.editorInfo.district = '';
              }
            }
          })
        },

        //获取省
        getProvCityAreaList: function (id) {
          let vm = this;
          vm.city = [];
          vm.area = [];
          // vm.editorInfo.city = '';
          // vm.editorInfo.district = '';
          instance.post('/sys/getProvCityAreaList').then(function (data) {
            vm.province = data.data.data;
          })
        },

        //获取省市地区
        getCitys: function (id) {
          let vm = this;
          vm.area = [];
          // vm.editorInfo.city = '';
          // vm.editorInfo.district = '';
          instance.post('/sys/getProvCityAreaList/' + id,).then(function (data) {
            vm.city = data.data.data;
          })
        },

        //获取省市地区
        getAreas: function (id) {
          let vm = this;
          // vm.editorInfo.district = '';
          instance.post('/sys/getProvCityAreaList/' + id,).then(function (data) {
            vm.area = data.data.data;
          })
        },

        //
        savevalitor:function(){
          let vm = this;
          vm.$confirm('此操作将保存企业信息, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            vm.subminForm();
          }).catch(() => {

          })
        },
        //保存
        subminForm:function () {
          let vm = this;
          if(!vm.companyName){
            vm.$message.error('公司名称不能为空');
            return;
          }
          if(!vm.organizationalCode){
            vm.$message.error('组织机构代码不能为空');
            return;
          }
          if(vm.organizationalCode.length != 9){
            vm.$message.error('组织机构代码字段值应该为9位，请确认');
            return;
          }
          if(!vm.linkman){
            // vm.errorClass = false;
            // vm.errorShow = true;
            // vm.errorTitle = "联系人错误";
            // vm.errorMsg = "联系人不能为空！";
            // vm.setTime();
            vm.$message.error('联系人不能为空');
            return;
          }
          if(!vm.contactEmail){
            vm.$message.error('联系人邮箱不能为空');
            return;
          }
          let reg = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
          if(!reg.test(this.contactEmail)){
            vm.$message.error('请填写正确邮箱格式');
            return;
          }
          if(!vm.contactPhone){
            vm.$message.error('联系人手机号不能为空');
            return;
          }
          let regPhone = /^[1][3,4,5,7,8][0-9]{9}$/;
          if(!regPhone.test(this.contactPhone)){
            vm.$message.error('请填写正确手机号');
            return;
          }
          if(!vm.ebcName){
            vm.$message.error('企业名称不能为空');
            return;
          }
          if(!vm.onlineCode){
            vm.$message.error('企业备案编码不能为空');
            return;
          }
          if(vm.onlineCode.length != 10){
            vm.$message.error('企业备案编码字段值应该为10位，请确认');
            return;
          }
          if(!vm.senderCode){
            vm.$message.error('企业跨境编码不能为空');
            return;
          }
          if(vm.senderCode.length != 7){
            vm.$message.error('企业跨境编码字段值应该为7位，请确认');
            return;
          }
          // if(!vm.userNumber){
          if(!vm.appUid){
            vm.$message.error('用户编号不能为空');
            return;
          }
          // if(!vm.userName){
          if(!vm.appUname){
            vm.$message.error('用户名称不能为空');
            return;
          }
          if(!vm.vendorId){
            vm.$message.error('工行企业编号不能为空');
            return;
          }


          instance({
            method:'post',
            url:'/user/editEnterpriseInfo',
            data:{
              "no": vm.enterpriseNum,
              "superAdmin": vm.enterpriseInfo.superAdmin,
              "name": trim(vm.companyName),
              "province":vm.editorInfo.province,
              "city": vm.editorInfo.city,
              "countyArea": vm.editorInfo.district,
              "address": trim(vm.companyAdress),
              "contact": trim(vm.linkman),
              "contactEmai": trim(vm.contactEmail),
              "contactPhone": trim(vm.contactPhone),
              "vendorId": vm.vendorId,

              "organizationalCode": trim(vm.organizationalCode),
              // "userNumber": trim(vm.userNumber),
              "appUid": trim(vm.appUid),
              // "userName": trim(vm.userName),
              "appUname": trim(vm.appUname),
              "onlineCode": trim(vm.onlineCode),
              "senderCode": trim(vm.senderCode),
              "ebcName": trim(vm.ebcName),
              "logisticsEnterpriseCode": trim(vm.logisticsEnterpriseCode),
              "vendorId": trim(vm.vendorId),
              "transactionCode": trim(vm.transactionCode),
              "transactionPostscript": trim(vm.transactionPostscript),
            }
          }).then(function (data) {
            if(data.data.success){
              vm.$message({
                message: data.data.msg,
                type: 'success'
              });
            }else {
              vm.$message({
                message: data.data.msg,
                type: 'warning'
              });
              return;
            }
          })
        },

        back() {
          this.$router.back();
        }
      },
      created(){
          this.getProvCityAreaList();

          //获取企业信息
          this.getEnterpriseInfo();

          window.v = this;
      }
    }
</script>

<style>
.company-info .el-form-item__content {
  width: 550px!important;
}

.company-address .el-form-item__content {
  display: flex;
}

  .company-message {
    background-color: #fff;
    padding: 20px;
  }

  .company-message-title {
    font-size: 16px;
    border-bottom: 1px solid #E4E7ED;
    padding: 5px 0px 20px 0px;
    margin-bottom: 20px;
  }
</style>
